<template>
  <div ref="myLine"></div>
</template>
<script>
let echarts = require('echarts/lib/echarts');
  export default {
    name: 'myBarChart',
    props: ['chartData','layer'],
    data () {
      return {

      }
    },
    created () {
      
    },
    mounted() {
      this.drawLine()
    },
    methods: {
      drawLine() {
        var _this=this;
        let dom= this.$refs.myLine;
        let myLine = echarts.init(dom);
        //console.log('chartData',this.chartData);
        var data=this.chartData;
        var dataName=['A层','B层','C层','D层','E层','F层','G层',];
        var output=["A_output","B_output","C_output","D_output","E_output","F_output","G_output"];
        var color=['#dd6b66','#ea7e53','#8dc1a9','#e69d87','#759aa0','#ea7e53','#8dc1a9',];
        var pieData=[];
        var layer=parseInt(this.layer);
        console.log("layer",layer)
        for(var i=0;i<layer;i++){
          pieData.push({
                        value:data[output[i]],
                        name:dataName[i],
                        itemStyle: {
                          color:color[i],
                        },
                        labelLine: {
                          length:0,
                          length2:0,
                        },
                      },);
        }
        // if(this.chartData.length>0){
        //   this.chartData.forEach(function(i){
        //     var date=i.create_date.split(" ");
        //     yAxisData.push(date[0]);
        //     xAxisData.push(i.count);
        //   })
        // }
        // 绘制图表
        myLine.setOption({
          textStyle: {
            color:'#fff',
          },
          title: {
            show:false,
            text: '5月日平均利用率',//_this.title
            x:'center',
            subtext:'',//_this.subtitle
            textStyle: {
              color: '#fff',
              fontSize:20,
              fontWeight: 'normal',
            },
            top: '10px',
            subtextStyle: {
              color: '#a0a0a0',
              fontSize: 15,
            },
          },
          tooltip : {
              trigger: 'item',
              formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          legend: {
            show:false,
            x : 'center',
            y : 'bottom',
            data:[]
          },
          calculable : true,
          series : [
              {
                  name:'月生产总量',
                  type:'pie',
                  radius : [30, 90],
                  center : ['50%', '45%'],
                  roseType : 'area',
                  data:pieData,
                  // data:[
                  //     {
                  //       value:data.A_output,
                  //       name:'A层',
                  //       itemStyle: {
                  //         color:'#dd6b66',
                  //       },
                  //       labelLine: {
                  //         length:0,
                  //         length2:0,
                  //       },
                  //     },
                  //     {
                  //       value:data.B_output, 
                  //       name:'B层',
                  //       itemStyle: {color:'#ea7e53',},
                  //       labelLine: {
                  //         length:0,
                  //         length2:0,
                  //       },
                  //     },
                  //     {
                  //       value:data.C_output, 
                  //       name:'C层',
                  //       itemStyle: {color:'#8dc1a9',},
                  //       labelLine: {
                  //         length:0,
                  //         length2:0,
                  //       },
                  //     },
                  //     {
                  //       value:data.D_output, name:'D层',itemStyle: {color:'#e69d87',},
                  //       labelLine: {
                  //         length:0,
                  //         length2:0,
                  //       },
                  //     },
                  //     {
                  //       value:data.E_output, name:'E层',itemStyle: {color:'#759aa0',},
                  //       labelLine: {
                  //         length:0,
                  //         length2:0,
                  //       },
                  //     },
                  // ]
              }
          ]
        });
      },
    }
  }
</script>
<style scoped>
</style>
